import React, { Component } from "react";
import { Redirect,Link } from "react-router-dom";
import { Form, Input, Button, message, Spin } from "antd";
import  * as Icon from '@ant-design/icons';
//import { connect } from "react-redux";
import DocumentTitle from "react-document-title";
import "./index.less";
//import { login, getUserInfo } from "@/store/actions";
import logo from "@/assets/logo.svg"

class Login extends Component {
    formRef = React.createRef();
    state = {
        loading: false,
    };
    onFinish = values => {
        // 对所有表单字段进行检验
        this.formRef.current.validateFields().then((values) => {
            console.log("submit", values);
            const { username, password } = values;
            this.login(username, password);
        }).catch((errors) => {
            console.log("errors", errors);
        });
    };

    login = (username, password) => {
        const { login } = this.props;
        // 登录完成后 发送请求 调用接口获取用户信息
        this.setState({ loading: true });
        login(username, password).then((data) => {
            // this.setState({ loading: false });
            message.success("登录成功");
            this.getUserInfo(data.token);
        }).catch((error) => {
            this.setState({ loading: false });
            message.error(error);
        });
    };
    // 获取用户信息
    getUserInfo = (token) => {
        const { getUserInfo } = this.props;
        getUserInfo(token).then((data) => {

        }).catch((error) => {
            message.error(error);
        });
    };

    
    render() {
        // 如果用户已经登陆, 自动跳转到管理界面
        const { token } = this.props;
        if (token) {
            return <Redirect to="/dashboard" />;
        }
        return (
			<div className="user-layout-wrapper">
				<DocumentTitle title={"用户登录"}>
					<div className="container">
						<div className="top">
							<div className="header">
								<Link to="/">
									<img src={logo} className="logo" alt="logo"/>
									<span className="title">Ant Design</span>
								</Link>
							</div>
							<div className="desc">
								Ant Design 是西湖区最具影响力的 Web 设计规范
							</div>
						</div>
						<div className="main">
							<Form ref={this.formRef} onFinish={this.onFinish} className="user-layout-login">
								<Spin spinning={this.state.loading} tip="加载中...">
									<Form.Item name="username" rules={[{ required: true, whitespace: true, message: "用户名必须输入", }]} initialValue="admin">
										<Input
											size="large"
											prefix={
												React.createElement(
													Icon["UserOutlined"],
													{
														style:{ color: "rgba(0,0,0,.25)" }
													}
												)
											}
											placeholder="用户名"
										/>
									</Form.Item>
									<Form.Item name="password" rules={[{ required: true, whitespace: true, message: "密码必须输入", }]} initialValue="123456">
											<Input
												size="large"
												prefix={
													React.createElement(
														Icon["LockOutlined"],
														{
															style:{ color: "rgba(0,0,0,.25)" }
														}
													)
												}
												type="password"
												placeholder="密码"
											/>
									</Form.Item>
									<Form.Item>
										<Button
											size="large"
											type="primary"
											htmlType="submit"
											className="login-button"
										>
										  登录
										</Button>
									</Form.Item>
									<Form.Item>
										<span>账号 : admin 密码 : 随便填</span>
										<br />
										<span>账号 : guest 密码 : 随便填</span>
									</Form.Item>
								</Spin>
							</Form>
						</div>
					</div>
				</DocumentTitle>
			</div>
        );
    }
}

export default Login;
